<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name:'系统管理'},{name:'权限管理'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:584px">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100" @click="add(0)">
                    新增
                </el-button>
            </div>
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}"
                      :tree-props="{children: 'son'}" row-key="id" default-expand-all>
                <el-table-column label="名称">
                    <template slot-scope="scope">{{ (scope.row.name) }}</template>
                </el-table-column>
                <el-table-column label="接口地址" prop="url"></el-table-column>
                <!--        <el-table-column label="ID" prop="id" width="150"></el-table-column>-->
                <el-table-column label="排序" prop="sort" width="120">
                    <template slot-scope="scope">
                        <el-input size="mini" type="number" :max="1000" v-model="scope.row.sort"
                                  @change="changeOrder(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="200" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑" @click="edit(scope.row)" type="primary"
                                   icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除" @click="del(scope.row.id)" type="danger"
                                   icon="el-icon-delete" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="新增下级权限" @click="add(scope.row.id)"
                                   v-if="scope.row.level!=3" type="success"
                                   icon="el-icon-plus" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="editId?'编辑':'添加'" width="500px" :visible.sync="addDialogIsShow">
            <div class="add-box">
                <div class="flex-center flex-between">
                    <span class="span">名称</span>
                    <el-input placeholder="请输入" style="width:300px;" v-model="addobj.name"></el-input>
                </div>
                <div class="flex-center flex-between mt-20">
                    <span class="span">分类</span>
                    <el-cascader placeholder="顶级分类" class="width-300"
                                 filterable v-model="addobj.parent_id" :options="list"
                                 :props="{checkStrictly:true,label:'name',value:'id',children:'son'}"></el-cascader>
                </div>
                <div class="flex-center flex-between mt-20">
                    <span class="span">接口地址</span>
                    <el-input placeholder="请输入" style="width:300px;" v-model="addobj.url"></el-input>
                </div>
                <div class="flex-center flex-between mt-20">
                    <span class="span">排序</span>
                    <el-input placeholder="请输入" style="width:300px;" v-model="addobj.sort"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button v-preventDbClick @click="addDialogIsShow=false">取 消</el-button>
        <el-button v-preventDbClick type="primary" @click="submit">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";

export default {
    data() {
        return {
            list: [],
            categorys: [],
            editId: 0,
            addDialogIsShow: false,
            addobj: {
                name: '',
                parent_id: 0,
                url: '',
                sort: 1,
            },
        };
    },

    computed: {},

    created() {
        this.getData();
    },

    methods: {
        changeOrder(row) {
            request({
                url: '/manage/auth/editSort',
                data: {id: row.id, sort: row.sort}
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    this.getData();
                })
            })
        },

        submit() {
            let addobj = Object.assign({}, this.addobj);
            if (typeof addobj.parent_id == 'object') {
                addobj.parent_id = addobj.parent_id[addobj.parent_id.length - 1];
            }
            if (this.editId) {
                addobj.id = this.editId;
                request({
                    url: '/manage/auth/edit',
                    data: addobj
                }).then((res) => {
                    this.addDialogIsShow = false;
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            } else {
                request({
                    url: '/manage/auth/add',
                    data: addobj
                }).then((res) => {
                    this.addDialogIsShow = false;
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            }
        },

        add(parentId) {
            console.log(parentId)
            this.editId = 0;
            this.addobj.parent_id = parentId || '';
            this.addobj.sort = 1;
            this.addobj.name = '';
            this.addobj.name = '';
            this.addobj.url = '';
            this.addDialogIsShow = true;
        },

        edit(item) {
            this.editId = item.id;
            this.addobj.parent_id = item.parent_id;
            this.addobj.name = item.name;
            this.addobj.url = item.url;
            this.addobj.sort = item.sort;
            this.addDialogIsShow = true;
            console.log(this.addobj.parent_id);
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/auth/realDel',
                    data: {id: id}
                }).then((res) => {
                    this.addDialogIsShow = false;
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        getData() {
            request({
                url: '/manage/auth/all',
            }).then((res) => {
                let data = res.data;
                let list = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].parent_id == 0) {
                        data[i]['son'] = [];
                        data[i]['level'] = 1;
                        list.push(data[i]);
                        // data.splice(i, 1);  //这句加了有问题
                    }
                }
                for (let i = 0; i < data.length; i++) {
                    for (let k = 0; k < list.length; k++) {
                        if (data[i]['parent_id'] === list[k]['id']) {
                            data[i]['level'] = 2;
                            data[i]['son'] = [];
                            list[k]['son'].push(data[i]);
                        }
                    }
                    // data.splice(i, 1);
                }
                for (let i = 0; i < data.length; i++) {
                    for (let k = 0; k < list.length; k++) {
                        for (let kk = 0; kk < list[k]['son'].length; kk++) {
                            if (data[i]['parent_id'] === list[k]['son'][kk]['id']) {
                                data[i]['level'] = 3;
                                data[i]['disabled'] = true;
                                list[k]['son'][kk]['son'].push(data[i]);
                            }
                        }
                    }
                }
                this.list = list;
            })

        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
